import React, { memo, useEffect, useState } from "react";
import HeaderRightWrapper from "./stlye";
import IconGlobal from "@/assets/svg/icon_global";
import IconMenu from "@/assets/svg/icon_menu";
import IconAvatar from "@/assets/svg/icon_avatar";

export default memo(function HomeRight() {
  const [showPannel, setShowPannel] = useState(false);
  useEffect(() => {
    const fn = () => {
      setShowPannel(false);
    };
    window.addEventListener("click", fn, true);
    return () => {
      window.removeEventListener("click", fn, true);
    };
  }, []);
  function clickShowPannelHandle() {
    setShowPannel(true);
  }
  return (
    <HeaderRightWrapper>
      <div className="btns">
        <span className="btn">登录</span>
        <span className="btn">注册</span>
        <span className="btn">
          <IconGlobal />
        </span>
      </div>
      <div className="profile" onClick={clickShowPannelHandle}>
        <span className="btn">
          <IconMenu />
        </span>
        <span className="btn iconAvatar">
          <IconAvatar />
        </span>
        {showPannel && (
          <div className="pannel">
            <div className="top">
              <div className="item">注册</div>
              <div className="item">登录</div>
            </div>
            <div className="bottom">
              <div className="item">出租房源</div>
              <div className="item">开展体验</div>
              <div className="item">帮助</div>
            </div>
          </div>
        )}
      </div>
    </HeaderRightWrapper>
  );
});
